<template>
    <div class="out_box">
        <!-- <div class="info">
            <img class="avator mb_20" src="@assets/imgs/common/imgs.jpg" />
            <p class="name mb_20">
                未设置呢称
                <br />
                176****3675
            </p>
            <p class="last_date">上次登录：2020-06-13 15:10:59</p>
        </div> -->
        <div class="menu relative">
            <div class="list mb_30" v-for="(item, index) of menuData" :key="item.head">
                <h2 class="head bold mb_10">{{ item.head }}</h2>
                <span :class="['text pointer', 'KEY_' + (info.key ? info.key : info.src)]" v-for="(info, key) of item.content" :key="info.text" @click="toggleTabDistance(index, key, info)">{{ info.text }}</span>
            </div>
            <div class="select" :style="'top:' + tabDistance"></div>
        </div>
    </div>
</template>

<script>
    let clicked = false;    // 是否已被点击
    let isHandle = true;    // 是否手动点击

    export default {
        name: "PersonalMenu",
        data: function() {
            return {
                menuData: [                     // head: 一级标题，text: 二级标题，src: 需要切换的组件名称，key: 实际切换的组件名称（有的菜单点击是跳到其它的菜单）
                    {
                        head: '个人中心',
                        content: [
                            { text: '基本资料', src: 'BasicInfo' },
                            { text: '实名验证', src: 'Authentication' },
                            { text: '登录记录', src: '' },
                            { text: '收货地址', src: '' }
                        ]
                    }, {
                        head: '资产管理',
                        content: [
                            { text: '钱包', src: 'Wallet' },
                            { text: '挖矿收益', src: 'Wallet', key: 'miningAccount' },
                            { text: '充值', src: 'Recharge' },
                            { text: '提现', src: 'GetCash', key: '' },
                            { text: '账单明细', src: 'BillDetails' },
                            { text: '销售佣金', src: 'Wallet', key: 'salesCommission', commissionType: 1 },
                            { text: '挖矿佣金', src: 'Wallet', key: 'salesCommission', commissionType: 2 }
                        ]
                    }, {
                        head: '订单管理',
                        content: [
                            { text: '哈哈金币', src: 'CoinHahaOrder' },
                            { text: '算力订单', src: 'HashRateOrder' },
                            { text: '团队订单', src: 'TeamOrder' },
                            { text: '礼券管理', src: '' },
                            { text: '其它', src: '' }
                        ]
                    }, {
                        head: '团队管理',
                        content: [
                            { text: '我的团队', src: 'MyTeam' },
                            { text: '专属二维码', src: 'QRcode' },
                            { text: '分销说明', path: 'DistributionDesc' },
                            { text: '成员清单', src: 'MemberList' }
                        ]
                    }, {
                        head: '安全设置',
                        content: [
                            // { text: '修改密码', src: '' },
                            // { text: '邮箱绑定', src: '' },
                            // { text: '修改手机号码', src: '' },
                            { text: '支付设置', src: '' },
                            { text: '谷歌验证码', src: '' },
                            { text: '两步登录保护', src: '' },
                            { text: '法币交易黑名单', src: '' }
                        ]
                    }, {
                        head: '帮助中心',
                        content: [
                            { text: '系统消息', src: '' },
                            { text: '新手指南', src: '' },
                            { text: '费率说明', path: '/others/article' },
                            { text: '我的工单', src: 'WorkOrders' },
                            { text: '联系我们', path: '/others/article' }
                        ]
                    }
                ],
                tabDistance: '11px',
            }
        },
        computed: {
            personalMenuKEY: function() {
                const personalMenuKEY = this.$store.state.personalMenuKEY;
                return personalMenuKEY;
            }
        },
        watch: {
            personalMenuKEY: function() {
                isHandle = false;
                $('.KEY_' + this.personalMenuKEY.src).click();
            }
        },
        methods: {
            toggleTabDistance: function(index, key, data) {
                let tabHeight = [];

                if (data.path) {
                    const { text } = data;
                    this.$router.push({ path: '/others/article', query: { text } });
                } else if (isHandle && data.key && !data.commissionType) {         // 如果有key，先按照src的跳转
                    // data = $.$deepCopy(data);
                    isHandle = false;
                    $('.KEY_' + data.src).click();
                    this.$store.commit({
                        type: 'togglePersonalMenuKEY',
                        data
                    });
                } else {                            // 正常src的跳转
                    if (!clicked) {
                        clicked = true;
                        // 动态计算选中样式的TOP值
                        $('.menu>.list').each(function(i) {
                            let lastVal = i === 0 ? 0 : tabHeight[i - 1];
                            tabHeight.push($(this).height() + lastVal - 26);
                        });
                        
                        let addHeight = index === 0 ? 0 : tabHeight[index - 1];
                        let spaceDistance = 56 * (index + 1) + key * 28 + addHeight;
        
                        this.tabDistance = spaceDistance + 'px';

                        // 如果是手动点击，则需要切换当前组件状态
                        if (data && data.src && isHandle) {
                            this.$store.commit({
                                type: 'togglePersonalMenuKEY',
                                data
                            });
                        }
                    }
                }

                if (clicked) {
                    setTimeout(function() {
                        clicked = false;
                        isHandle = true;
                    }, 700);
                }
            }
        },
        mounted: function() {
            const langMenu = this.$t('personal.menu');
            this.$nextTick(function() {
                if (this.personalMenuKEY.src) {
                    $('.KEY_' + this.personalMenuKEY.src).click();
                } else {
                    $('.KEY_BasicInfo').click();
                }
            });
            // 多语言
            this.menuData.forEach(function(item, index) {
                item.head = langMenu[index].head;
                item.content.forEach(function(one, key) {
                    one.text = langMenu[index].content[key];
                });
            });
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';
    
    .out_box{
        width: 140px;
    }
    .info{
        text-align: center;
        padding: 30px 20px;
        margin-bottom: 10px;
        background-color: #f2f2f2;
        .avator{
            width: 80px;
        }
        .name{
            margin-bottom: 20px;
        }
        .last_date{
            color: #AAA;
        }
    }
    .menu{
        padding: 30px 20px;
        background-color: white;
        .list{
            .head{
                font-size: 16px;
                line-height: 16px;
            }
            .text{
                display: block;
                font-size: 13px;
                color: #666;
                line-height: 28px;
            }
        }
        .select{
            position: absolute;
            top: 10px;
            left: 0;
            z-index: 4;
            width: 4px;
            height: 22px;
            margin-top: 4px;
            background-color: #4c84ff;
            transition: 0.1s top;
        }
    }
</style>
